Menunujkan cara class timer 

Dapat gunakan sbuah method atau periodik atau secara waktu atau bisa tentukan 

waktu dahulu 

Misalkan satu jalankan sebuah methosd setelah 5 detik 

Kita buat dahulu stf widget 

Baut material app scafold lalu appbar 

Body center sisnya subah text 

Yg akan tampilkan counter 
= 01:16 / 08:19 


App» { 


t counter = 0; 
erride 
build(Bui yntext context) { 
Ma pp( 
home: ff i( 
appBar: AppBar(title: Text( 
body: nter( 
child: Column( 


mainAxisAlignment: M: nt.center, 


| 
children: <Widg 
Text(counter.toString(), style: TextStyle(fontSize: |),) 


IP 


», 
», 


2448): JNI_OnLoad 
er( 2440): playSoundEffect effectType: @ 
2440): Do partial code cache collection, code=3@KB, data=29KB 
2440): After code cache collection, cod B, data=29KB 
54( 2440): Increasing code cache capacity to 128KB 
finished. 


af Type heve 10 ses 


Dibawahnya buat raisedbutton onprased kosongi dahulu 


child: Lumn( 
mainAxisAlignment: nAx ignment.center, 
children: <Widget>[ 
( 
counter.toStr 15 
style: xtStyle(fontSize: 40, fontWeight: 


), 


child: 
onPressed: () {}, 
) : 


Cai STACK 


/hwaps ( 40): JNI_OnLoad 
/AudioManager( 2448): playSoundEffect effect 
( 2440): Do partial code cache collection, code=3@KB, data=29KB 
2448): After code cache collection, code-30KB, data=29KB 
2449): Increasing code cache capacity to 128KB 


Child nya buat 5 detik kemudian lalu buat jarak sizedbox 
Lalu buat 2xlagi 


No Configurations * GP 


zedBox(height: 10,), 
aisedButton( 
child: Text( 
onPressed: () {}, 
», 
dBox(he H t a 
isedBut ( 
child: xt( 
onPressed: () {}, 
)s 
zedBox(height: 10,), 
aisec t n( 
child: Text( 
onPressed: () (), 


», 


/nwaps ( 40): JNI OnLoad 


/AudioManager( 2440): playSoundEffect effectType: @ 
/zyg 64( 2440): Do partial code cache collection, code=30KB, data=29KB 
zygote64( 2440): After code cache collection, code=30KB, data=29KB 
gote64( 40): Increasing code cache capacity to 128KB 
aii Application finished. 


Save kita jalankan dahulu maka tampilan seperti ini 


(hei 
( 
child: ("Ubah warna 5 detik kemudian"), 
onPressed: () (), 
)s 
(height: 10,), 
( 
child: ("Ubah warna secara langsung"), 
onPressed: () (), 
)s 
(height: 10,), 
( 
child: ("Start Timer"), 
onPressed: () {}, 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug.apk. 


createState() => 


isBlack = 
counter = @; 


build( context) { 
return 
home: 
appBar: ( 
title: ("Timer Demo"), 
), 
body: 


child: 


( 


mainAxisAlignment: 


children: 


> 


.center, 


0 


Ubah warna 5 detik kemudian 
Ubah warna secara langsung 


Start Timer 


Launching lib\main.dart on RNE L22 in debug mode... 


Built build\app\outputs\apk\debug\app-debug. apk. 


Pa 
. 
a 


Lalu disni fontcolor nya kita ubah 


Fontcolors nya kita ubah kjalau dia isblack maka kita kasih black kalau bukan kasih 
red 


children: <Widget>[ 
Text ( 
counter.toString(), 
style: xt yle( 
color: (isBlack) ? 
fontSize: 40, 
fontWeight: 
)’ 
izedBox( 
height: 10, 
», 
RaisedButton ( 
child: xt ( 
onPressed: () {}, 
», 
edBox( 
height: 10, 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug.apk. 
Reloaded 1 of 462 libraries in 874ms. 


Lalu kita kebawah 

Bagian kita ubah warna secara langsung maka 

Kita kasih perintah timer . run 

Kalau timer nya ini kita harus tambhakna dart aync 


onPressed: () {}, 

)s 

sizedBox( 

height: 10, 


sdButton ( 

child: xt ( 
onPressed: () { 

‘rerun 


edBox( 
eight: 10, 


edButton( 
child: Text( 
onPressed: () {}, 
1 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug.apk. 
Reloaded 1 of 462 libraries in 874ms. 


Nah method timer run menjalan satu buah method secara langsung secara 0 de 
Tanpa anonymous method 
Kita mau setstate kita ubah isBalck nya 


)s 
( 
height: 10, 
», 


( 


("Ubah warna secara langsun 


child: 
onPressed: () { 
-run(() { 
setState(() { 
isBlack = !isBlack; 
D; 
}); 
}, 
), 
( 
height: 10, 
), 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\output debu pp-debug.apk. 
Reloaded 1 of 462 libraries in 874ms 


Reloaded 1 of 462 libraries in 625ms. 


et 


Kita kli 


k maka langsung berubah 


Sekarang kita keerjakan 5 detik kemudian 
Timer(Duration pasang 5 detik 


No Coni m t G 


Lalu calback yg harus kita gunakan 


mandat 
x 


height: 10, 
), 

( 
child: ("Ubah warna 5 « 
onPressed: () { 

( (seconds: 5), () { 
setState(() { 
isBlack = !isBlack;| 
}); 
}); 
pr 
), 
( 
height: 10, 
)s 

( 

child: ("Ubah warna secara lar 


1/Zygote64( 5522): Atter code cache collection, code=30KB, data-28KB 


Increasing code cache capacity to 128KB 


tik kemudian"), 


sung"), 


5522): 


playSoundEffect 


playSoundEffect 
playSoundEffect 
: playSoundEffect 


libraries in 653ms. 


Maka kita klik ubah wran 5 kemudian 


effectType: 
effectType: 
effectType 
effectTyp 


Timer Demo 


0 


Ubah warna 5 detik kemudian 
Ubah warna secara langsung 


Start Timer 


mandant 


height: 10, 


Ne Timer Demo 
( 
child: ( 
onPressed: () { 
( (seconds: 5), () { 
setState(() { 
isBlack = !isBlack; 


0 


Ubah warna 5 detik kemudian 


Ubah warna secara langsung 


height: 10, 
ys Start Timer 


( 
child: ( 


ettectlype: © 


effectType: 


ct effectType: @ 


cache collection, coc 


ere to sea 


9 ch i "Bat oo 

Dia berubah setelah 5 detik 

Jadi kalau ada durasi sebelum mengerjakan sesuatu kmaka gunakan timer ini 
durasation second berapa dan kasih method yg mau dijalankan apa 
Sedangkan kalau mau lansung timer . run 

Sekarang buat secara periodik atau secara berskla 

Kita pkaai timer in nanti dia naik terus dari 0 sampai 1 2 3 dan setrusnya 

Dan kita tambhkan juga stop timer nya supaya nanti tau bagaimana cara stop nya 
Kita kebawah kita tambhkan lagi 

Disni 

Kasih stop timer 


child: ("Start Timer"), 
onPressed: () {}, 
)s 
( 
height: 10, 
)s 


( 
child: ("Stop Timer"), 
onPressed: () {}, 


2 Libraries in 653ms. 
playSoundEffect effectType: @ 


© partial code cache collection 


|: B De of oe SRAM 
Distop timer pasang stop.periodik duration mau setiap kapan contoh setiap 1 detik 
Jadi setiap 1 detik akan pangil apa 

Untuk disni kita punya parameter timer 

Timer ini yg sedang dijalankan 

Jadi konsep timer periodik ini dia buat object timer 

Sama seperti yg tadi buat timer satu buahh ketikan jalankan 5 detik setelah 5 detik 
dia menjalankan methodnya 

Sedangkan timer periodik ini dia akan terus membuat object timer yg durasi 1 detik 


akan menjalan kan methodnya nanti satu detik kemudian dia bikin lagi sampai 
sterusnya 


Kosongi dahulu 


edBox ( 
height: 10, 
», 
RaisedButton( 
child: Text( ras 
onPressed: () { 
r.periodic(Dura n(seconds: 1), (timer){}); 
}, 
)s 
edBox( 
height: 10, 
)s 
RaisedButton( 
child: Text( 
onPressed: () {}, 


Reloaded 1 ot 462 libraries in 653ms. 

V/AudioManager( 5522): playSoundEffect effectType: @ 

I/zygote64( 5522): Do partial code cache collection, code=61KB, data=53KB 
I/zygote64( 5522): After code cache collection, code=61KB, data=53KB 
I/zygote64( 5522): Increasing code cache capacity to 256KB 
V/AudioManager( 5522): playSoundEffect effectType: @ 


Mr 


Reloaded 1 of 462 libraries in 698ms. 


Lalu ke 


Tea bara Ia Tea ort em III INN 
atas tambhkan lagi boole an isStop true 


@override 


MyAppState createState() => 


isStop 

| isBlack 

counter 
@override 


g build(BuildContext context) { 


home: 1 
appBar: AppBar 
title: Tex 
); 
body: 
child: ylumn( 
Reloaded 1 ot 462 libraries in 653ms. 
V/AudioManager( 5522): playSoundEffect effectType: @ 
/zygote64( 5522): Do partial code cache collection, code=61KB, data=53KB 
/zygote64( 5522): After code cache collection, code=61KB, data=53KB 
/zygote64( 5522): Increasing code cache capacity to 256KB 
V/AudioManager( 5522): playSoundEffect effectType: @ 


PA 


Reloaded 1 of 462 libraries in 698ms 


© Type hereto searc "aeese)s 

Lalu kebawah 

Ketika kita start timer disni isStop buat false disni kita buat if 

siStop itu true maka kita stop timernya 

kita stop timer caranya timer.cencel 

kalau isSTop masih false belum kita stop maka dia update terus maka buat setState 
counter nya ++ 


tambhkan conter nya 0 setiap tekan start timer 


)s 
( 
height: 
», 


child: x rt Timer"), 
onPressed: () { 
counter = 0; 
isStop = c 
-periodic( (seconds: 1), (timer) { 
if (isStop) timer.cancel(); 
setState(() { 
counter++; 


D; 


1braries 1n 653 
V/ 5522): playSoundEffect effectType: 
/zygote 5522): Do partial code cache collection, 


ygote64( : After code cache collection, cod 


I 
I 
I/zygote64( 5522): c sing code che cap 
V 


/AudioManager( 5522): playSoundEffect effectType: 


Reloaded 1 o libraries in 698ms 


kalau stop 
isStop buat true 


No Configurations "GP 


setState(() { 
counter++; 


D; 


), 


ch isStop 


on package:timer demo/main.dart 
isStop - 3| 


effectType: @ 
tial code cache collection, code-61KB, data-53KB 


: After code cache collection, code=61KB, data B 


I/zygote64( 22): Increasing code cache capacity to 2 
1 


V/AudioManager( 5522): playSoundEffect effectType: 


serong 
Bae Reloaded 1 of 462 libraries in 698ms 
a 


Jadi ketika klik stop nya true ketika 


Kita jalan start timer terus2 maka kita scop maka cencel 


child: 


onPressed: () { 
isStop = true; 7 


}, 


Ubah warna 5 detik kemudian 
Ubah warna secara langsung 
Start Timer 


Stop Timer 


ygote64( 5522): Do partial code cache collection, code=61KB, data-53KB 
I/zygote64( 5522): After code cache collection, code=61KB, data=53KB 
I/zygote64( 5522): Increasing code cache capacity to 256KB 
V/AudioManager( 5522): playSoundEffect effectType: @ 
Reloaded 1 of 462 libraries in 698m 
Reloaded 1 of 462 libraries in 747ms. 


Pa 


Manager( 5522): playSoundEffect effectType: @ 


ch i © me MN DSN. 
Disni maka jalan terus 
Klik lagi maka jalan lagi dari awal 


No Configurations 


child: 
onPressed: () { 

isStop = true; 3 
}s 


Ubah warna 5 detik kemudian 
Ubah warna secara langsung 
Start Timer 


Stop Timer 
ausa 


increasing code « e capacıty to 
playSoundEffect effectType: 
Reloaded of 462 a in 698ms 
Reloaded 1 of 462 libraries in 747ms. 
V/AudioManager( 5 : playSoundEffect effectType: 
V/hu Manager( : playSoundEffect effectType: 


P 


/AudioManager( 2): playSoundEffect effectType: 


û aese g5 
Jadi sepetrti ini cara mengunakan timer 


